<template>
    <div>
      <el-dialog
        :title="saveForm.id ? '更新' : '添加'"
        :visible.sync="saveDialogVisible">
        <el-form ref="saveFormRef" :model="saveForm" label-width="80px">
          <el-form-item label="年龄">
            <el-input-number v-model="saveForm.age" label="">
            </el-input-number>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="saveForm.gender">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="人数">
            <el-input-number v-model="saveForm.number" label="">
            </el-input-number>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="saveDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
      <el-card>
        <el-button plain type="primary" @click="openSaveForm">新增</el-button>
      </el-card>
      <el-card class="m-t-10">
        <div>
          <el-table class="m-10" :data="tableData" stripe :header-cell-style="{background:'aliceblue',color:'#666'}">
            <el-table-column prop="id" label="id" width="70">
            </el-table-column>
            <el-table-column  prop="gender" label="性别"></el-table-column>
            <el-table-column  prop="age" label="年龄"></el-table-column>
            <el-table-column  prop="number" label="数量"></el-table-column>

            <el-table-column label="操作" width="180" align="center">
              <template slot-scope="scope">
                <el-button plain type="primary" @click="tableEdit(scope)" size="mini">编辑</el-button>
                <el-button plain type="danger" size="mini" @click=tableDel(scope)>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              background
              layout="total, prev, pager, next"
              @current-change="handleCurrentChange"
              :current-page="param.current"
              :page-sizes="[10, 20, 30]"
              :page-size="param.size"
              :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
</template>
<script>
import { agePopulationApiSave, agePopulationApiDel, agePopulationPage } from '@/api/age-population-api'
export default {
  data() {
    return {
      param: {
        current: 1
      },
      tableData: [],
      total: 0,

      saveDialogVisible: false,
      saveForm: {}
    }
  },
  created() {
    this.listData()
  },
  methods: {
    listData(){
      agePopulationPage(this.param).then(res => {
        if (res.code === '200') {          
          this.tableData = res.data.records
          this.total = res.data.total
        }
        
      })
    },
    tableEdit(scope){
      this.saveForm = scope.row
      this.saveDialogVisible = true
    },
    tableDel(scope){
      agePopulationApiDel(scope.row.id).then(res => {
        if(res.code === '200'){
          this.$message.success('操作成功')
          this.tableData.splice(scope.$index, 1)
        }
      })
    },

    handleCurrentChange(val) {
      this.param.current = val
      this.listData()
    },
    openSaveForm(){
      this.saveForm = {
        age: 0,
        gender: '男',
        number: 0
      }
      this.saveDialogVisible = true
      
    },
    submitForm(){
      console.log(this.saveForm);
      agePopulationApiSave(this.saveForm).then(res => {
        if (res.code === '200') {
          this.$message.success('操作成功')
          this.saveDialogVisible = false
          if(this.saveForm.id){
            // 更新
            
          } else {
            // 添加
            this.tableData.push(res.data)
          }

        }
      })
      
    },
    
  }
}
</script>
<style lang="scss" scoped>
</style>